<template>
  <el-card class="box-card" style="width: 100%">
    <div slot="header" class="clearfix" style="width: 100%">
      <span>点样式</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="restoreDefault">恢复默认</el-button>
      <el-button type="primary" style="float: right; padding: 3px 10px" @click="changeStyle">提交</el-button>
    </div>
    <div>
      符号------类别：
      <el-select v-model="cstyleobject.csymbolcategoryvalue" placeholder="圆形">
        <el-option
          v-for="item in symbolcategoryoptions"
          :key="item.symbolcategoryvalue"
          :label="item.symbolcategorylabel"
          :value="item.symbolcategoryvalue">
        </el-option>
      </el-select>
      <br>
      符号------尺寸：
      <el-input-number v-model="cstyleobject.csymbolsize" :precision="1" :min="0" :step="0.1" :max="100"></el-input-number>
      <br>
      整体---透明度：
      <el-input-number v-model="cstyleobject.csymbolopacity" :precision="2" :min="0" :step="0.01" :max="1"></el-input-number>
      <br>
      旋转------角度：
      <el-input-number v-model="cstyleobject.csymbolrotation" :min="-360" :step="1" :max="360"></el-input-number>
      <br>
      填充-------颜色：
      <el-color-picker
        v-model="cstyleobject.cfillcolor"
        :predefine="predefinecolors" size="small">
      </el-color-picker>
      <br>
      填充---透明度：
      <el-input-number v-model="cstyleobject.cfillopacity" :precision="2" :min="0" :step="0.01" :max="1"></el-input-number>
      <br>
      边框-------颜色：
      <el-color-picker
        v-model="cstyleobject.cbordercolor"
        :predefine="predefinecolors" size="small">
      </el-color-picker>
      <br>
      边框---透明度：
      <el-input-number v-model="cstyleobject.cborderopacity" :precision="2" :min="0" :step="0.01" :max="1"></el-input-number>
      <br>
      最小显示比例：
      <el-input style="width: 200px" v-model="cstyleobject.cminscale">
        <template slot="prepend">1:</template>
      </el-input>
      <br>
      最大显示比例：
      <el-input style="width: 200px" v-model="cstyleobject.cmaxscale">
        <template slot="prepend">1:</template>
      </el-input>
    </div>
  </el-card>
</template>

<script>
    export default {
        name: "pointstyler",
        props:{
          cstyleobject:Object,
        },
      data(){
        return{
          predefinecolors: [
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585'
          ],
          symbolcategoryoptions: [{
            symbolcategoryvalue: 'circle',
            symbolcategorylabel: '圆形'
          }, {
            symbolcategoryvalue: 'square',
            symbolcategorylabel: '方形'
          }, {
            symbolcategoryvalue: 'triangle',
            symbolcategorylabel: '三角形'
          }, {
            symbolcategoryvalue: 'star',
            symbolcategorylabel: '星形'
          }, {
            symbolcategoryvalue: 'cross',
            symbolcategorylabel: '十字叉'
          }],
          symbolcategoryvalue: 'circle',

        }
      },
        methods:{
          //样式面板恢复默认
          restoreDefault(){
            this.cstyleobject.csymbolsize = 1;
            this.cstyleobject.csymbolopacity = 1;
            this.cstyleobject.csymbolrotation = 0;
            this.cstyleobject.cfillcolor = '#95989A';
            this.cstyleobject.cfillopacity = 1;
            this.cstyleobject.cbordercolor = '#95989A';
            this.cstyleobject.cborderopacity = 1;
            this.cstyleobject.cminscale = '500000';
            this.cstyleobject.cmaxscale ='0';
            this.cstyleobject.csymbolcategoryvalue = 'circle';
          },
          changeStyle(){
            this.$emit('changePTStyle')
          }


        }
    }
</script>

<style scoped>
  .el-select .el-input {
    width: 100px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
